<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>硬件管理</title>
    <%-- 全站样式 --%>
    <jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>
    
</head>

<body class="page-body skin-navy">
<div class="page-container">
		<%--侧边栏 --%>
		<jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>
    <div class="main-content">
        <%--导航栏 --%>
		<jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>

        <div class="page-title">
            <div class="title-env">
                <h1 class="title">类型管理</h1>
                <p class="description">您可以在此页面对系统支持的硬件进行添加、修改和查看</p>
            </div>
        </div>

        <div class="panel panel-default panel-tabs">
            <div class="panel-heading">
                <h3 class="panel-title"></h3>
                <div class="panel-options">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#hardwareType" data-toggle="tab">硬件类型</a>
                        </li>
                        <li>
                            <a href="#spectrumType" data-toggle="tab" onclick="listAllType()">光谱类型</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="hardwareType">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-offset-3">
                                        <div class="tocify-content">
                                            <div class="icon-collection">
                                                <div class="fontawesome-icon-list">
                                                    <div class="fa-hover pull-right">
                                                        <i class="fa fa-plus"></i>
                                                        <span><a href="javascript:;" data-toggle="modal" data-target="#addHardware">添加硬件类型</a></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                 <table class="table table-striped table-bordered " id="example-3">
                    <thead>
                    <tr class="replace-inputs">
                        <th>硬件编号</th>
                        <th>硬件名称</th>
                        <th>添加时间</th>
                        <th>光谱类型</th> 
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="session_hardware"  items="${ session_hardware}">
                    <tr>
                        <td>${ session_hardware.hardwareType}</td>
                        <td>${ session_hardware.hardwareName}</td>
                        <td class="center">${ session_hardware.addTime}</td>
                        <td>${ session_hardware.spectrumType}</td>
                        <td>
                            <a href=""  onclick="setinfo(${ session_hardware.hardwareID},this)"   data-toggle="modal" data-target="#modal-1"class="btn btn-info btn-sm btn-icon icon-left">
                                修改
                            </a>
	                      <%--  <a href="" onclick="setid(${ session_hardware.hardwareID})" data-toggle="modal" data-target="#delete" class="btn btn-info btn-sm btn-icon icon-left">
                                删除
                            </a> --%>
                        </td>
                      </tr>
                     </c:forEach>
                    </tbody>
                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="spectrumType">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-offset-3">
                                        <div class="tocify-content">
                                            <div class="icon-collection">
                                                <div class="fontawesome-icon-list">
                                                    <div class="fa-hover pull-right">
                                                        <i class="fa fa-plus"></i>
                                                        <span><a href="javascript:;" data-toggle="modal" data-target="#add">添加光谱类型</a></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <table class="table table-bordered table-striped " id="spectrum">
                                    <thead>
                                    <tr>
                                        <th>光谱类型编号</th>
                                        <th>光谱类型名称</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody class="middle-align" id="type">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

  		<%--页脚 --%>
		<jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
    </div>
</div>

<div class="page-loading-overlay">
    <div class="loader-2"></div>
</div>

<div class="modal fade" id="add">
    <div class="modal-dialog">
        <div class="modal-content">
			<form action="<c:url value='/addType.do'/>" method="post">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">添加光谱类型</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="field-1" class="control-label">光谱类型名称</label>
                            <input type="text" class="form-control" id="field-1" name="spectrumType" required="required">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-white">确定</button>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="uptype">
	<form action="<c:url value='/updateType.do'/>" method="post">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">修改光谱类型</h4>
            </div>
			<input type="hidden" id="sID" name="Id" value="">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="sType" class="control-label">光谱类型名称</label>
                            <input type="text" class="form-control" id="sType" name="spectrumType" required="required">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-white" >确定</button>
                </div>
            </div>
        </div>
    </div>
    </form>
</div>

<div class="modal fade" id="modal-1">
	<form action="<c:url value='/updateHardware.do'/>" method="post">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">修改硬件</h4>
            </div>

            <div class="modal-body">
            <input type="hidden" name="hardwareID" id="hid" class="form-control" value=""/>
                <div class="row">
                    <div class="col-md-6">

                        <div class="form-group">
                            <label for="hType" class="control-label">硬件型号</label>

                            <input type="text" class="form-control" id="hType" name="hardwareType" value="" />
                        </div>

                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="hName" class="control-label">硬件名称</label>

                            <input type="text" class="form-control" id="hName" name="hardwareName" value=""  required="required"/>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="sTypeID" class="control-label">光谱编号</label>
                            <input type="text" class="form-control" id="sTypeID" name="spectrumTypeID" value="" disabled/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="aTime" class="control-label">添加时间</label>
                            <input type="text" class="form-control" id="aTime" name="addTime" value="" disabled/>
                        </div>
                    </div>                    
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-info">确定</button>
            </div>
        </div>
    </div>
    </form>
</div>
<div class="modal fade" id="addHardware">
	<form action="<c:url value='/addHardware.do'/>" method="post">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">添加硬件</h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">

                        <div class="form-group">
                            <label for="field-1" class="control-label">硬件型号</label>

                            <input type="text" class="form-control" name="hardwareType" />
                        </div>

                    </div>
                    <div class="col-md-6">

                        <div class="form-group">
                            <label for="field-1" class="control-label">硬件名称</label>

                            <input type="text" class="form-control" name="hardwareName" required="required"/>
                        </div>
                    </div>
                </div>
                  <div class="row">
                    <div class="col-md-12">

                        <div class="form-group">
                            <label for="field-1" class="control-label">支持光谱的编号</label>

                            <input type="text" class="form-control" name="spectrumTypeID" required="required" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-info">添加</button>
            </div>
        </div>
    </div>
    </form>
</div>
<div class="modal fade bs-example-modal-sm" id="delete">
    <form action="<c:url value='/deleteHardware.do'/>" method="post">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title">删除</h4>
	            </div>
				
	            <div class="modal-body">
	                <div style="text-align: center;">
	                    <h4>您确定要删除该硬件类型吗？</h4>
	                </div>             
	            </div>
	            	<input type="hidden" name="hardwareID" id="hid" class="form-control" value=""/>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
	                <input type="submit" class="btn btn-white"  />
	            </div>
	        </div>
	    </div>
    </form>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#example-3").dataTable().yadcf([{
        column_number: 0,
        filter_type:'text'
    }, {
        column_number: 1,
        filter_type: 'text'
    }, {
        column_number: 2,
        filter_type: 'text'
    }, ]);
    
/*     $("#example-2").dataTable().yadcf([{
        column_number: 0,
        filter_type:'text'
    }, {
        column_number: 1,
        filter_type: 'text'
    }, ]); */
});

jQuery(document).ready(function($) {
    // Notifications
    setTimeout(function() {
        var opts = {
            "closeButton": true,
            "debug": false,
            "positionClass": "toast-top-right toast-default",
            "toastClass": "black",
            "onclick": null,
            "showDuration": "100",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
    }, 2000);
});

function setid(hid) {  
    $('#hid').val(hid);//给会话中的隐藏属性赋值 
}

function setinfo(hid,obj) {  
    $('#hid').val(hid);
	//找到table父元素
    var table=obj.parentNode.parentNode;
	//找到第一个td
	var Type=$(table).find('td')[0];
	//获取td标签的内容
	var hardwareType=$(Type).text();
	//赋值给input
	$('#hType').val(hardwareType);
	
	var Name=$(table).find('td')[1];
	var hardwareName=$(Name).text();
	$('#hName').val(hardwareName);
	
	var Time=$(table).find('td')[2];
	var addTime=$(Time).text();
	$('#aTime').val(addTime);	
	
	var sID=$(table).find('td')[3];
	var spectrumTypeID=$(sID).text();
	$('#sTypeID').val(spectrumTypeID);    
}

function listAllType(){
	var table = $('#spectrum').dataTable({
		"aLengthMenu" : [ [ 10, 20, 50, -1 ], [ 10, 20, 50, "All" ] ],
		"processing" : true,
		"ajax" : "/listAllType.do",
		"columns" : [ 
			{"data" : "Id"},
			{"data" : "spectrumType"},
			{"render":function ( data, type, row,meta ) {
				return   "<a class='btn btn-info btn-sm btn-icon icon-left' onclick='updateType("+row.Id+","+"this"+")'>修改</a>"/*+
				"<a class='btn btn-info btn-sm btn-icon icon-left'onclick='del("+row.contentID+","+1+")'>删除</a>"*/;
				}
		}]
	});
}
	function updateType(id,obj){
		$('#sID').val(id);
		var table=obj.parentNode.parentNode;
		//找到类型名称
		var Type=$(table).find('td')[1];
		var spectrumType=$.trim($(Type).text());
		
		$('#sType').val(spectrumType);
		
		jQuery('#uptype').modal('show', {backdrop: 'fade'});
	}
	
		$("#sType").change(function(){
			var spectrumType=document.getElementById("sType").value;
			if(spectrumType.length > 16){
				alert("长度超过限制");
				return;
			}else alert(spectrumType.length);
		});

	
</script>
<%-- 尾部内容 --%>
<jsp:include page="/WEB-INF/jsps/template_tail.jsp" />
        
<!-- Imported styles on this page -->

<script src="assets/js/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/js/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/select2/select2.min.js"></script>
<script src="assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script src="assets/js/datatables/tabletools/dataTables.tableTools.min.js"></script>

<!--Specific JS for this page-->
<script type="text/javascript">
</script>
</body>
</html>